<template>
	<div class="wrappar">

		<!-- 表格 -->
		<div>
			<el-dialog title="订单提示信息" :visible.sync="dialogVisible" width="650px" :close-on-click-modal="false">
				<div>
					<div class="oreder-info">
						<div>您有<span style="color: red;">{{tableData.length}}条</span>新的订单信息，请及时处理！！</div>
						<div style="margin-left: 40px; cursor: pointer;" @click="handleRouter">
							<span>去订单列表</span>
							<i class="el-icon-arrow-right"></i>
						</div>
					</div>
					<!-- 表格 -->
					<el-table :data="tableData" style="width: 100%;margin-top: 12px;" :show-close="false">
						<el-table-column type="index" label="序列" width="80"></el-table-column>
						<el-table-column prop="orderCode" label="订单编码" width="200">
							<template slot-scope="scope">
								<div style="cursor: pointer;" @click="handleDetails(scope.row)">{{scope.row.orderCode}}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="goodType" label="房型"></el-table-column>
						<el-table-column prop="reminderType" label="订单状态">
							<template slot-scope="scope">
								{{scope.row.reminderType == 1?"未接单":"取消预约"}}
							</template>
						</el-table-column>
					</el-table>
				</div>

				<span slot="footer" class="dialog-footer">
					<el-button @click="handleClose">关 闭</el-button>
				</span>
			</el-dialog>
		</div>
		
		<!-- 订单详情 -->
		<el-dialog title="订单详情" :visible.sync="open" width="900px" :close-on-click-modal="false">
			<div v-loading="openContentLoading">
				<el-form ref="ruleForm" label-width="140px">
					<el-row>
						<el-col :span="9">
							<el-form-item label="订单编号：">{{options.orderNumber}}</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="订单状态：">{{options.orderStatus}}</el-form-item>
						</el-col>
						<el-col :span="9">
							<el-form-item label="预约时间：">{{options.createTime | $YYYY_MM_DD_hh_mm_ss}}</el-form-item>
						</el-col>
					</el-row>
					
					<el-row v-if="options.orderStatus && options.orderStatus.indexOf('取消') != -1">
						<el-col :span="24">
							<el-form-item :label="options.orderStatus+'原因：'">{{options.reason}}</el-form-item>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="24">
							<el-form-item label="预约房型：">{{options.goodsName}}</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="24">
							<el-form-item label="房客姓名：">{{options.arriveName}}</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="24">
							<el-form-item label="房客电话：">{{options.arrivePhone}}</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="住宿时间：">{{options.inTime | $YYYY_MM_DD}} 至
								{{options.outTime | $YYYY_MM_DD}}
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="住宿天数：">{{options.dayNum}}天</el-form-item>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="24">
							<el-form-item label="特殊要求：">{{options.specialRequest}}</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="房价：">
								<div class="room-table">
									<div class="room-table-price">实付金额：￥{{options.totalPrice}}</div>
									<div class="room-table-box">
										<div class="room-table-box-item" v-for="(item,index) in options.priceDetail"
											:key="index"
											:style="options.priceDetail.length == 1? 'border-right: none;' : ''">
											<div class="cell-1">{{item.times}}</div>
											<div class="cell-2">房间单价：￥{{{price:item.price,arriveName:options.arriveName}|getUnitPrice}}</div>
											<div class="cell-3">房间数量：{{options.arriveName|getRoomNumb}}间</div>
										</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer" v-if="operateOptions.reminderType == 1">
				<el-button type="primary" @click="handleCheckIn(operateOptions)">接 单</el-button>
				<el-button @click="handleCancel(operateOptions)" style="margin-left: 60px;">取消预约</el-button>
			</span>
		</el-dialog>

		<el-dialog title="取消预约" :visible.sync="showCancelReservation" width="600px" :close-on-click-modal="false">
			<el-form label-width="110px">
				<el-form-item label="操作人:">
					{{$store.state.user.name}}
				</el-form-item>
				<el-form-item label="取消预约原因:">
					<el-input type="textarea" placeholder="请输入内容" rows="10" v-model="cancelReservationVal"
						maxlength="2000" show-word-limit />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showCancelReservation = false" style="margin-right: 40px;">取 消</el-button>
				<el-button type="primary" :loading="showCancelReservationBtnLoading"
					@click="handleCancelReservation(operateOptions)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		AudioTips,
		FwbSocket
	} from "@/utils/audio.js";
	import {
		hotelOrderList,
		hotelOrderCheckIn,
		cancelReservation,
		cancelOrder
	} from "@/api/hotel/order";
	import {
		orderManage
	} from "@/api/order/content";
	import audio from "@/assets/audio/1.mp3"
	export default {
		name: 'Audio',
		data() {
			return {
				time: null,
				times: 0,
				dialogVisible: false,
				openContentLoading: false,
				showCancelReservation: false,
				showCancelReservationBtnLoading: false,
				operateOptions: {},
				reminderType:0,
				options: {},
				open: false,
				tableData: [],
				audioTips: '',
				audioWs: '',
				cancelReservationVal: ''
			}
		},
		methods: {
			handleClose() { //清空
				this.audioTips.pause();
				this.dialogVisible = false;
				this.tableData = [];
			},
			async handleCancelReservation(options) { //取消预约
				try {
					this.showCancelReservationBtnLoading = true;
					let res = await cancelReservation({
						storeOrderId: options.storeOrderId,
						f2: this.cancelReservationVal
					});
					this.showCancelReservation = false;
					this.showCancelReservationBtnLoading = false;
					this.open = false;
					
					this.handleClose();
					this.$message.success("操作成功");
				} catch (e) {
					console.log('失败原因',e)
					this.showCancelReservation = false;
					this.showCancelReservationBtnLoading = false;
				}
			},
			async handleCancel(options) {
				this.operateOptions = options;
				this.cancelReservationVal = '';
				this.showCancelReservation = true;
				this.showCancelReservationBtnLoading = false;
			},
			async handleCheckIn(options, open) { //入驻 接单
				try {
					let res = await hotelOrderCheckIn({
						storeOrderId: options.storeOrderId //酒店订单id
					});
					this.showCancelReservation = false;
					this.open = false;
					this.handleClose();
					this.$message.success("操作成功");
				} catch (e) {
					this.open = false;
					this.showCancelReservation = false;
					console.log(e)
				}
			},
			async handleDetails(options) {
				try {
					this.open = true;
					this.openContentLoading = true;
					this.operateOptions = options;
					this.options = {};
					let res = await orderManage(options.orderId);
					res.data._status = options.orderStatus;
					this.options = res.data;
					this.options.storeOrderId = opeions.orderId;
					this.openContentLoading = false;
					this.handleClose(); //关闭内容
				} catch (e) {
					this.openContentLoading = false;
				}
			},
			handleRouter() {
				this.$router.push({
					path: "/hotel/content/index",
					query: {
						id: 1
					}
				});
				this.handleClose();
			},
		},
		created() {
			this.audioTips = new AudioTips(audio);
			this.$bus.$on('ws', status => {
				if (status == 2) return this.audioWs.close();
				if (this.audioWs) return this.audioWs.open(
					`${process.env.VUE_APP_BASE_WS}/websocket/${this.$store.state.user.name}`);
				this.audioWs = new FwbSocket();
				this.audioWs.open(`${process.env.VUE_APP_BASE_WS}/websocket/${this.$store.state.user.name}`);
				let _this = this;
				this.audioWs.message = res => {
					if (res.data == "ping") return;
					if (_this.time) {
						clearInterval(_this.time);
						_this.times = 0;
						_this.time = null;
					};
					this.tableData = JSON.parse(res.data).map(item=>{
						item.storeOrderId = item.orderId;
						return item;
					});
					console.log(this.tableData);
					this.audioTips.play(); //播放音乐
					this.dialogVisible = true;
					this.open = false; //关闭详情
					this.showCancelReservation = false; // 关闭输入
				};
			});
		},
		filters: {
			getUnitPrice(options){
				if(!options.arriveName) return;
				let numb = options.arriveName.split(',').length;
				return options.price / numb
			},
			getRoomNumb(str){
				if(!str) return;
				return str.split(',').length;
			}
		}
	}
</script>
<style lang="scss" scoped>
	$borderColor: #cccccc;

	::v-deep .el-dialog__footer {
		text-align: center;
	}

	.oreder-info {
		display: flex;
	}

	.room-table {
		display: inline-block;
		border: 1px solid $borderColor;
		max-width: 620px;

		.room-table-price {
			width: 100%;
			box-sizing: border-box;
			padding: 0 10px;
			border-bottom: 1px solid $borderColor;
		}

		.room-table-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-left: 1px;
			margin-right: -1px;
			box-sizing: border-box;
			.room-table-box-item {
				width: 154px;
				padding: 10px;
				box-sizing: border-box;
				border-bottom: 1px solid $borderColor;
				border-right: 1px solid $borderColor;
				margin-bottom: -1px;
				
				&:nth-child(4n){
					border-right: none;
				}

				.cell-1 {}

				.cell-2 {
					padding: 10px 0;
				}

				.cell-3 {}
			}
		}
	}
</style>
